<script lang="ts" setup>
import { ref } from "vue";
//导入图片
import Open from "./assets/Open.svg";
import Close from "./assets/Close.svg";
const count = "<button>hello world</button>";
let isShow = ref(true);
let gender = ref(1); // 1:男 2:女
let Chengji = ref(90);
//属性绑定
let Show = ref(true);
const food = ref(["苹果", "香蕉", "西瓜", "草莓", "蓝莓"]);
//登陆用户密码
const user = ref("");
const password = ref("");
</script>
<template>
  <p v-text="count"></p>
  <p v-html="count"></p>
  <p>这是：{{ count }}</p>
  <div class="hezi" v-show="isShow">这是V-show</div>
  <div class="hezi" v-if="isShow">这是V-if</div>
  <button @click="isShow = !isShow">展示/隐藏</button>
  <hr />
  <div id="app">
    <p v-if="gender === 1">性别：♂ 男</p>
    <p v-else>性别：♀ 女</p>
    <p>成绩：{{ Chengji }}</p>
    <p v-if="Chengji >= 90">成绩评定A:奖励电脑一台</p>
    <p v-else-if="Chengji >= 80">成绩评定B:奖励周末郊游</p>
    <p v-else-if="Chengji >= 60">成绩评定C:奖励零食礼包</p>
    <p v-else>成绩评定D:惩罚一周不能玩手机</p>
    <button @click="Chengji < 100 ? (Chengji = Chengji + 5) : 0">
      学了会习，加5分
    </button>
    <button v-on:click="Chengji > 0 ? (Chengji = Chengji - 5) : 0">
      玩了手机，扣5分
    </button>
    <button @click="gender = gender === 1 ? 2 : 1">切换性别</button>
  </div>
  <hr />
  <img :src="Show ? Open : Close" alt="开关" /><button @click="Show = !Show">
    切换
  </button>
  <hr />
  <p v-for="(item, index) in food" :key="item">{{ index + 1 + ":" + item }}</p>
  <ol>
    <li v-for="item in food" :key="item">{{ item }}</li>
  </ol>
  <ol style="list-style-type: decimal">
    <li v-for="item in 10" key="item">测试用例</li>
  </ol>
  <input type="text" v-model="user" />
  <br /><br />
  <input type="password" v-model="password" />
  <p>用户名：{{ user }}</p>
  <p>密码：{{ password }}</p>
</template>

<style scoped>
p {
  color: red;
  font-size: 20px;
  align-items: center;
}

.hezi {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 20px;
  font-size: 20px;
  color: white;
  text-align: center;
}

button {
  margin-left: 20px;
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>
